<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入css样式 -->
    <link rel="stylesheet" href="./clover.css">
    <title>clover</title>
</head>
<body>
    <!-- 四叶草 -->
    <div class="box">
        <!-- 四叶草的单片叶子 -->
        <div class="clover"></div>
        <div class="clover"></div>
        <div class="clover"></div>
        <div class="clover"></div>
    </div>
    <!-- 表单盒子 -->
    <div class="form-box">
        <!-- 登录盒子 -->
        <div class="login-box">
            <!-- 标题 -->
            <h1 class="title">
                Sign in
            </h1>
            <!-- 图片盒子 -->
            <div class="img-box">
                <!-- 图片 -->
                <img src="./img/胡桃.jpg" alt="">
            </div>
            <!-- 输入框盒子 -->
            <div class="input-box">
                <!-- 输入框 -->
                <input type="text" placeholder="用户名">
                <input type="password" placeholder="密码">
            </div>
            <!-- 按钮盒子 -->
            <div class="btn-box">
                <button>登录</button>
                <!-- 绑定点击事件 -->
                <button onclick="mySlide()">注册</button>
            </div>
        </div>
        <!-- 注册盒子 -->
        <div class="register-box">
            <!-- 标题 -->
            <h1 class="title">
                Sign up
            </h1>
            <!-- 图片盒子 -->
            <div class="img-box">
                <!-- 图片 -->
                <img src="./img/可莉.png" alt="">
            </div>
            <!-- 输入框盒子 -->
            <div class="input-box">
                <!-- 输入框 -->
                <input type="text" placeholder="用户名">
                <input type="password" placeholder="密码">
                <input type="password" placeholder="确认密码">
            </div>
            <!-- 按钮盒子 -->
            <div class="btn-box">
                <button>注册</button>
                <!-- 绑定点击事件 -->
                <button onclick="mySlide()">登录</button>
            </div>
        </div>
    </div>
    <script>
        // 控制切换状态
        let flag=true
        // 切换函数
        const mySlide = ()=>{
            // 获取注册盒子和登录盒子的dom元素
            const register_box=document.querySelector('.register-box')
            const login_box=document.querySelector('.login-box')

            if(flag){
                // 注册盒子显示
                register_box.style.display="block"
                // 登录盒子隐藏
                login_box.style.display="none"
            }else {
                //注册盒子隐藏
                register_box.style.display="none"
                // 登录盒子显示
                login_box.style.display="block"
            }
            // 每次点击都改变状态
            flag=!flag
        }
    </script>
</body>
</html>